<template>
<div class="main">
    <div class="title">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item>资料管理</el-breadcrumb-item>
        <el-breadcrumb-item>楼道管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="">新建楼座</a></el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="content">
        新建楼座
    </div>
    <div class="box">
        <div class="basic">基础信息</div>
        <div class="box-content">
            <span class="names">楼座名称</span>
            <span class="star">*</span>
            <el-input v-model="from.input" placeholder="请输入内容"></el-input>
        </div>
        <div class="box-content">
            <span class="dates">建成日期</span>
            <span class="star"></span>
            <div class="block">
                <el-date-picker
                v-model="from.value1"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
                </el-date-picker>
            </div>
        </div>
        <div class="box-content">
            <span>房屋用途</span>
            <span class="star"></span>
            <el-select v-model="from.value" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="box-content">
            <span class="name">楼宇面积</span>
            <span class="star"></span>
            <el-input v-model="from.input1" placeholder="请输入内容"></el-input>
            <span class="unit">m²</span>
        </div>
        <div class="box-content">
            <span>单元数量</span>
            <span class="star"></span>
            <el-input v-model="from.input2" placeholder="请输入内容"></el-input>
        </div>
        <div class="box-content">
            <span>单元楼层数量</span>
            <span class="star"></span>
            <div class="ipt">
                <el-input v-model="from.input3" placeholder="请输入内容"></el-input>
            </div>
        </div>
        <div class="box-content boxs">
            <span>电梯</span>
            <span class="star"></span>
            <el-radio v-model="radio" label="1">有</el-radio>
            <el-radio v-model="radio" label="2">无</el-radio>
        </div>
        <div class="box-content boxs">
            <span>储物室</span>
            <span class="star"></span>
            <div class="radio">
                <el-radio v-model="radio1" label="1" class="radios" >有</el-radio>
                <el-radio v-model="radio1" label="2" class="radios">无</el-radio>
            </div>
        </div>
        <div class="box-contents">
            <span>备注</span>
            <div class="textareas">
                <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="from.textarea">
                </el-input>
            </div>
        </div>
        <div class="box-content">
            <el-button type="primary" @click="comit()">提交</el-button>
            <el-alert
                title="提交成功"
                type="success"
                center
                show-icon v-show="bol" @close="bol=false">
            </el-alert>
            <el-button @click="back()">返回</el-button>
        </div>
        
    </div>
</div>
</template>

<script>
import axios from 'axios';
export default {
    data(){
        return{
            bol:false,
            lists:[],
            options: [{
                value: '普通住宅',
                label: '普通住宅'
                }, {
                value: '商业用地',
                label: '商业用地'
                }, {
                value: '商住两用',
                label: '商住两用'
                },
                {
                value: '其它',
                label: '其它'
                }
            ],
            radio: '1',
            radio1:"1",
            from:{
                textarea: '',
                input:'',
                input2:'',
                input3:'',
                
                value: '',
                value1: '',
            },
        }
    },
    
    methods:{
        back(){
            this.$router.go(-1)
        },
        comit(){
            this.bol=true
            if(this.$route.query.data){
                console.log(this.from,12222222222)
                axios.post(`http://localhost:8085/user/updatefloor`,{
                    data:this.from,
                    id:this.$route.query.data.id
                }).then(res=>{ 
                    console.log(res);
                }).catch(error=>{ 
                    console.log(error);
                })
            }else{
                axios.post(`http://localhost:8085/user/addfloor`,{
                    data:this.from
                }).then(res=>{ 
                    console.log(res);
                }).catch(error=>{ 
                    console.log(error);
                })
            }
            setTimeout(()=>{
                this.$router.go(-1)
            },1000)
        }
    },
    mounted(){
        if(this.$route.query.data){
            this.from.input=this.$route.query.data.build
            this.from.value1=this.$route.query.data.date
            this.from.value=this.$route.query.data.house
            this.from.input2=this.$route.query.data.unit
            this.from.input3=this.$route.query.data.floor
            this.from.textarea=this.$route.query.data.notes
        }
        
    }
}
</script>

<style scoped lang="scss">
.el-button{
    margin-right: 15px;
}
.el-alert{
    position: fixed;
    left: 50%;
    width: 300px;
    height: 40px;
    top: 50px;
}
.main{
    margin: 0px;
    background-image: none;
    position: relative;
    left: -24px;
    width: 1136px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    .title{
        margin-top: 20px;
        padding: 16px 0 0 32px;
        background-color: #fff;
    }
    .content{
        font-weight: 700;
        background-color: #fff;
        font-size: 20px;
        color: rgba(0, 0, 0, 0.847058823529412);
        padding: 16px 0 16px 32px;
        border-bottom: 1px solid rgba(233, 233, 233, 1);;
    }
    .box{
        padding: 16px 0px 16px 32px;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.847058823529412);
        background-color: #fff;
        margin-top: 15px;
        .box-content{
            justify-content: center;
            display: flex;
            margin-top: 20px;
            align-items: center;
            span{
                font-size: 14px;
            }
            .name{
                font-size: 14px;
                color: rgba(0, 0, 0, 0.847058823529412);
                margin-left: 37px;
            }
            .star{
                color: #F46161;
                margin-right: 15px;
            }
            .unit{
                margin-left: 15px;
            }
        }
        
    }
}
.boxs{
    margin-right: 90px;
}
.box-contents{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    span{
        font-size: 14px;
        margin-right: 21px;
        margin-left: 30px;
        color: rgba(0, 0, 0, 0.847058823529412);
    }
    ::v-deep .el-textarea__inner{
        resize: none;
        width: 340px;
        height: 88px;
    }
}
.box-content{
    ::v-deep .el-input__inner{
        width: 340px !important;
        height: 32px !important;
        
    }
    ::v-deep .el-input{
        width: 340px !important;
    }
    ::v-deep .el-input__icon{
        line-height: 0 !important;
        
    }
}
.ipt{
    ::v-deep .el-input{
        margin-right: 27px !important;
    }
}
.el-radio{
    margin-left: 61px;
}
.radios{
    margin-left: 60px !important;
}
.radio{
    margin-right: 11px;
}
</style>